<template>
    <div class="animated fadeIn">
        <h3>人员资料</h3>
        <p>后台管理系统也不难做</p>
        <Table :columns="topBar" :data="info"></Table>   
    </div>
</template>

<script>
    export default {
        data() {
            return {
                 topBar: [
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                     {
                        title: "职业",
                        key: "job"
                    },
                    {
                        title: "月薪",
                        key: "money"
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 150,
                        align: "center",
                        render: (h,params) =>{
                            return h("div",[
                                h("Button",{
                                props:{
                                    type: "primary",
                                    size: "small"
                                },
                                style:{
                                    marginRight: "5px"
                                },
                                on:{
                                    click:()=>{
                                        this.show(params.index)
                                    }
                                }
                            },"查看"),
                            h("Button",{
                                props:{
                                    type:"error",
                                    size:"small"
                                },
                                on:{
                                    click:()=>{
                                        this.remove(params.index)
                                    }
                                }
                            },"删除")
                            ])
                        }
                    }
                ],
                info: [
                    {
                        name: '王小明',
                        age: 25,
                        address: '北京市朝阳区芍药居',
                        job: "web前端",
                        money: "8k"
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗',
                        job: "java工程师",
                        money: "13k"
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道',
                        job: "游戏开发",
                        money: "23k"
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道',
                        job: "php开发",
                        money: "0.3k"
                    }
                ]
            }
        },
         methods: {
            show (index) {
                this.$Modal.info({
                    title: '用户信息',
                    content: `姓名：${this.info[index].name}<br>年龄：${this.info[index].age}<br>地址：${this.info[index].address}<br>职业：${this.info[index].job}<br>月薪：${this.info[index].money}`
                })
            },
            remove (index) {
                this.info.splice(index, 1); 
            }
        },
    }
</script>

<style scoped>

</style>
